﻿<!DOCTYPE html>
<html>
<head>
    <script src="/js/header.js"></script>
    <style>
        .image-thumbnail {
            display: inline-block;
            max-width: 100%;
            height: auto;
            padding: 2px;
            line-height: 1.5;
            background-color: #fff;
            border: 2px solid #ddd;
            border-radius: 4px;
            -webkit-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
            width: 125px;
            height: 125px;
            margin-top: 3px;
            margin-left: 3px;
            position: relative;
        }

        .image-thumbnail-red {
            border: 2px solid #f80a04;
        }

        .image {
            width: 114px;
            height: 112px;
            margin:2px;
        }

        #preview {
            position: absolute;
            border: 1px solid #ccc;
            background: #333;
            padding: 5px;
            display: none;
            color: #fff;
        }
    </style>
</head>
<body class="bg_white">
    <section class="container-fluid" style="background-color: white;">
        <ul class="nav nav-tabs m15_t hide" id="myTab">
            <li class="active"><a href="#header" data-toggle="tab">库存卡基本信息</a></li>
            <li class="hide"><a href="#extra" data-toggle="tab">图片上传</a></li>
        </ul>
        <form class="form-horizontal m15_t" id="form" onsubmit="return false;">
            <div class="tab-content">
                <div class="tab-pane fade in active" id="header">
                    <div class="tab-content col-md-3">
                        <a href="#head"></a>
                        <input type="hidden" name="bcid" value="0">

                        <div class="tab-pane fade in active">
                            <div class="form-group">
                                <label class="wd125 control-label">银行卡类型：</label>
                                <div class="">
                                    <div style="margin-top:8px;">
                                        <span id="cardType" style="font-weight:bold; margin-left:5px;">安全卡</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="wd125 control-label"><span class="WdateFmtErr">*</span>银行名称：</label>
                                <select name="bankCode" class="wd200">
                                    <option value="">请选择</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="wd125 control-label"><span class="WdateFmtErr">*</span>银行卡号：</label>
                                <div class="">
                                    <input class="form-control wd250" type="text" name="cardNumber" maxlength="20" placeholder="长度必须介于 12 和 20 之间" autocomplete="off">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="wd125 control-label">银行副卡号：</label>
                                <div class="">
                                    <input class="form-control wd250" type="text" name="secCardNumber" maxlength="20" placeholder="长度必须介于 12 和 20 之间" autocomplete="off">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="wd125 control-label"><span class="WdateFmtErr">*</span>银行卡用户名：</label>
                                <div class="">
                                    <input class="form-control wd250" type="text" name="cardName" maxlength="40" placeholder="长度必须介于 2 和 40 之间" autocomplete="off">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="wd125 control-label">银行卡使用状态：</label>
                                <div class="">
                                    <div style="margin-top:8px;">
                                        <span id="usingStatus" style="font-weight:bold; margin-left:5px;"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="wd125 control-label">银行卡启用状态：</label>
                                <div class="">
                                    <div style="margin-top:8px;">
                                        <span id="enableStatus" style="font-weight:bold; margin-left:5px;"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="wd125 control-label">备注：</label>
                                <div class="">
                                    <input class="form-control wd250" type="text" name="remark" maxlength="50" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--图片上传-->
                <div class="tab-pane fade" id="extra">
                    <div class="data-wrap case">
                        <div class="data-tool clearfix">
                            <div class="pull-left form-inline ">
                                <span style="font-size:14px; font-weight:bold">删除图片需要保存才能生效</span>
                            </div>
                            <div class="pull-right">
                                <form id="from1" enctype="multipart/form-data" method="post">
                                    <input type="file" name="file" style="display:none" multiple />
                                    <input type="button" name="uploadBtn" value="上传" />
                                </form>
                            </div>

                        </div>
                        <div id="documentImage" class="m5_t p15_l">
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group" style="margin-top:10px;padding: 20px 15px;border-top: 1px solid #e5e6e7;">
                <label class="wd100 control-label"></label>
                <div class="wd250 m15_l">
                    <button class="btn btn-primary m50_l" onclick="return save();">保存</button>
                    <button class="btn btn-default m10_l" onclick="return cancel();">取消</button>
                </div>
                <div class="m20_t"></div>
            </div>
        </form>

    </section>

    <script type="text/x-dot-template" id="imageTemplate">
        {{ for(var prop in it) { }}
        {{? it[prop]['url'] }}
        <div class="image-thumbnail preview" url="{{=it[prop]['url']}}" src="{{=it[prop]['domain']}}/{{=it[prop]['url']}}">
            <img src="{{=it[prop]['domain']}}/{{=it[prop]['url']}}" alt="{{=it[prop]['description']}}" class="image" onclick="preview(this)" />
            <span class="glyphicon glyphicon-trash red" style="font-size:18px;font-weight:bold;cursor: pointer; position:absolute;z-index:99;left:100px;top:1px;" onclick="Remove(this)" title="删除"></span>
        </div>
        {{?}}
        {{ } }}
    </script>
    <script type="text/javascript">
        var maximum = 0; 
            var domain = "";
            $("input[name='uploadBtn']").click(function () {
            var l = $("#documentImage .image-thumbnail").length;
            if (l >= maximum) {
                FlashPay.UI.Tip_short_warning("已达上传图片数量上限。");
                return;
            }
                $("input[name='file']").click();
        });

        function Remove(obj) {
            $(obj).parent().remove();
        }

        function cancel() {
            FlashPay.UI.CloseDialog();
        }

        $("input[name='file']").change(function () {
            var val = $(this).val();
            if (!FlashPay.Util.isNullOrEmptySpance(val)) {
                var fileUpload = $(this).get(0);
                var files = fileUpload.files;

                var data = new FormData();
                for (var i = 0; i < files.length; i++) {
                    data.append(files[i].name, files[i]);
                }
                //追加一个参数,已上传图片数量
                data.append("filecount", $("#documentImage .image-thumbnail").length);

                var cover = FlashPay.UI.Mask({
                    obj: $("body"),
                    opacity: 0.5
                });

                FlashPay.Util.Ajax({
                    url: '/BankCard/UploadFiles',
                    type: 'POST',
                    contentType: false,
                    processData: false,
                    data: data,
                    success: function (res) {
                        cover.Remove();
                        if (res.success) {
                            var evalText = doT.template($("#imageTemplate").text());
                            $("#documentImage").append(evalText(res.data));
                            FlashPay.UI.Tip_short_warning(res.successMessage);
                        } else {
                            FlashPay.UI.Tip_short_warning(res.errorMessage);
                        }
                    },
                    error: function (json) {
                        cover.Remove();
                        FlashPay.UI.Tip_short_warning("操作失败！请查看网络，请重试。");
                    }
                });
            }
        });

        var validator = null;

        var bankCode = $("select[name='bankCode']");
        var orderNo = $("select[name='orderNo']")

        var id = 0;

        $(function () {

            id = FlashPay.Util.GetQueryString("id");

            init(id);

        });

        function preview(obj) {

            var url = "/view/bankcard/preview.html?url="+$(obj).attr("src");


            FlashPay.UI.DialogOpen(url, {
                title: "预览图片",
                width: 500,
                height: 450
            });
        }

        function init(id) {

            var cover = FlashPay.UI.Mask({
                obj: $("body"),
                opacity: 0.5
            });

            FlashPay.Util.Ajax({
                type: "POST",
                url: "/Bank/GetB2BStockBank?bcid=" + id,
                dataType: "json",
                contentType: "application/json",
                success: function (res) {
                    
                    if (res) {

                        if (res.bankInfoResponse != null) {
                            bankCode.empty();
                            bankCode.append("<option value=''>请选择</option>");

                            $.each(res.bankInfoResponse, function (i, item) {
                                bankCode.append("<option value='" + item.bankCode + "'>" + item.bankName + "</option >");
                            });
                        }
                        if (res.orderRecordResponse != null) {
                            orderNo.empty();
                            $.each(res.orderRecordResponse, function (i, item) {
                                orderNo.append("<option value='" + item.orderNo + "'>" + item.orderNo + "</option >");
                            });
                        }

                        if (res.documentResponse != null) {
                            var evalText = doT.template($("#imageTemplate").text());
                            $("#documentImage").append(evalText(res.documentResponse));
                        }
                        
                        FlashPay.Util.SetInputVal("bcid", res.bcid);
                        $("select[name='bankCode']").val(res.bankCode);

                        FlashPay.Util.SetInputVal("cardNumber", res.cardNumber);
                        FlashPay.Util.SetInputVal("secCardNumber", res.secCardNumber);
                        FlashPay.Util.SetInputVal("cardName", res.cardName);

                        $("#usingStatus").html(FlashPay.Util.GetCardStatusValue(res.usingStatus));
                        $("#enableStatus").html(FlashPay.Util.GetSpareCardEnableStatusValue(res.enableStatus));

                        //FlashPay.Util.SetInputVal("loginName", res.loginName);
                        //FlashPay.Util.SetInputVal("passwordLogin", res.passwordLogin);
                        //FlashPay.Util.SetInputVal("passwordQuery", res.passwordQuery);
                        //FlashPay.Util.SetInputVal("passwordPay", res.passwordPay);
                        //FlashPay.Util.SetInputVal("passwordShield", res.passwordShield);

                        //$("#usbType").find("option[value=" + res.usbType + "]").prop("selected", true);
                        //FlashPay.Util.SetInputVal("usbSerialNumber", res.usbSerialNumber);
                        //FlashPay.Util.SetInputVal("originalPassword", res.originalPassword);
                        //FlashPay.Util.SetInputVal("accountBank", res.accountBank);
                        //FlashPay.Util.SetInputVal("documentNumber", res.documentNumber);
                        //FlashPay.Util.SetInputVal("phoneNumber", res.phoneNumber);
                        //FlashPay.Util.SetInputVal("aliPayCardIndex", res.aliPayCardIndex);
                        //FlashPay.Util.SetInputVal("aliPayBankMark", res.aliPayBankMark);
                        //FlashPay.Util.SetInputVal("aliPayCardName", res.aliPayCardName);
                        FlashPay.Util.SetInputVal("remark", res.remark);
                        maximum = res.maximum;
                        if (res.depositUID == 0 || res.receiptUID == 0) {
                            $("#orderselect").removeClass("hide");
                        } else {
                            $("#orderlabel").removeClass("hide");
                        }

                        cover.Remove();
                    }
                }
            });
        }

        //保存
        function save() {

            var cover = FlashPay.UI.Mask({
                obj: $("body"),
                opacity: 0.5
            });

            var i = 1;

            var data = $("#form").serializeObject();

            var documents = [];

            $("#documentImage div").each(function () {
                var json = {};
                json.url = $(this).attr("url");
                json.sort = i;
                documents.push(json);
                i++;
            });
            if (documents.length > 0) {
                data.bankPhoto = JSON.stringify(documents);
            }

            FlashPay.Util.Ajax({
                type: "POST",
                url: "/Bank/SafeCardAddOrEdit",
                data: data,
                success: function (response) {
                    if (response.success) {
                        cover.Remove();
                        FlashPay.UI.DialogOpener().Tip_success("操作成功！");
                        FlashPay.UI.DialogOpener().doSearch();
                        FlashPay.UI.CloseDialog();
                    } else {
                        cover.Remove();
                        FlashPay.UI.Tip_short_warning("操作失败！" + response.errorMessage);
                    }
                },
                error: function (json) {
                    cover.Remove();
                    FlashPay.UI.Tip_warning("操作失败！请查看网络，请重试。");
                }
            });
        }


        function changeInputType(obj) {

            var that = $(obj).prev();
            if (that.attr('type') == 'text') {
                that.attr('type', 'password');
                $(obj).find("i").removeClass("glyphicon-eye-open");
                $(obj).find("i").addClass("glyphicon-eye-close");
            } else {
                that.attr('type', 'text');
                $(obj).find("i").removeClass("glyphicon-eye-close");
                $(obj).find("i").addClass("glyphicon-eye-open");
            }
        }

        Array.prototype.del = function (obj) {
            for (var i = 0; i < this.length; i++) {
                var temp = this[i];
                if (!isNaN(obj)) {
                    temp = i;
                }
                if (temp == obj) {
                    for (var j = i; j < this.length; j++) {
                        this[j] = this[j + 1];
                    }
                    this.length = this.length - 1;
                }
            }
        }

        $.fn.serializeObject = function () {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function () {
                if (o[this.name] !== undefined) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };
    </script>
</body>
</html>